<template>
	<div class="main">
    <div class="cont">
      <div v-show="currPath === 'navigat'" id="container"></div>
      <div class="editor-content guide" v-html="meetingInfo.meetingGuide" v-show="currPath === 'guide'"></div>
    </div>
    <div class="footer">
      <div class="tabbar-wrapper">
        <ul class="tabbar-list">
          <li v-for='(tab, index) of list' @click="handleChange(tab.path)" :key='index' :class="{active: tab.path === currPath}" class="tabbar-item">
            <p class="icon">
              <img v-if='tab.path === currPath' :src="getImgUrl(tab.icon)" alt="">
              <img v-else :src="getImgUrl2(tab.icon)" alt="">
            </p>
            <p class="text">{{tab.navName}}</p>
          </li>
        </ul>
      </div>
    </div>
	</div>
</template>
<script>
export default {
  name: 'Address',
  data () {
    return {
      meetingId: this.$route.query.meetingId,
      meetingInfo: {},
      longitude: this.$route.query.longitude,
      latitude: this.$route.query.latitude,
      currPath: 'navigat',
      list: [
        {
          icon: 'icon_daohang',
          navName: '地图导航',
          path: 'navigat'
        }
        // {
        //   icon: 'icon_guide',
        //   navName: '会场引导',
        //   path: 'guide'
        // }
        // {
        //   icon: 'icon_address',
        //   navName: '周边信息',
        //   path: 'around'
        // }
      ]
    }
  },
  methods: {
    // 获取会议详情
    fetchMeetingInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/offline/${this.meetingId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
          }
        }
      })
    },
    initMap () {
      /* eslint-disable */
      // 定义地图中心点坐标
      if (AMap) {
        this.mapBox = new AMap.Map('container', {
          resizeEnable: true,
          center: [this.longitude, this.latitude],
          zoom: 15
        })
        this.updateMarker()
      }
    },
    updateMarker (longitude, latitude) {
      var marker = new AMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
          position:  [this.longitude, this.latitude]
      });
      marker.setMap(this.mapBox)
    },
    handleChange (path) {
      this.currPath = path
    },
    getImgUrl (icon) {
      return require(`../../assets/img/${icon}_s@2x.png`)
    },
    getImgUrl2 (icon) {
      return require(`../../assets/img/${icon}_n@2x.png`)
    }
  },
  created () {
    this.fetchMeetingInfo()
    setTimeout(() => {
      this.initMap()
    }, 1000)
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  background rgb(249,250,251)
  padding-bottom 50px
  .cont
    width 100%
    height calc(100vh - 50px)
    #container
      width 100%
      height 100%
    .guide
      width 100%
      padding 15px
      border-box border-box
  .footer
    width 100%
    position fixed
    bottom 0
    left 0
    z-index 99
    .tabbar-wrapper
      width 100%
      .tabbar-list
        width 100%
        height 50px
        display flex
        align-items center
        .tabbar-item
          flex 1
          display flex
          justify-content center
          align-items center
          .icon
            height 16px
            img
              height 100%
          .text
            font-size 15px
            color #848484
            margin-left 6px
          &.active .text
            color #3DB5FF
</style>
